<template>
          <div class="weaInfo">
        <!-- <div>
          柘荣天气： {{ weatherInfo.weather }} {{ weatherInfo.temperature }}
          {{ weatherInfo.windDirection }} {{ weatherInfo.precipitation }}
          {{ weatherInfo.airQuality }}
        </div>
        <div>{{ weatherInfo.weatherWarning }}</div> -->
        <div>
          柘荣天气： {{ realWeatherInfo?.lives[0]?.weather }} &nbsp;
          {{ realWeatherInfo?.lives[0]?.temperature + "℃" }}&nbsp;
          {{
            realWeatherInfo?.lives[0]?.windDirection +
            "风" +
            realWeatherInfo?.lives[0]?.windPower + "m/s"
          }}&nbsp;
          {{ "湿度" + realWeatherInfo?.lives[0]?.humidity + "%" }}
          <!-- &nbsp;
          <span :title="issue.issueContent">{{ issue.signalLevel }}预警：{{ issue.signalType ?  issue.signalType : '无'}}</span> -->
          
        </div>
        <div class="issue-list">
            <img v-for="item in issueList" :src="getImg(item)" @click="toDetail(item)" class="img"  />
        </div>
        
      </div>
</template>
<script setup >
import {getWeather, tencentWeather} from '@/api/weatherApi'
import {weatherImg} from '@/utils/letterUtil'
import { onMounted, ref } from 'vue';
import { Modal } from 'ant-design-vue';
const a = ref()
let weatherInfo = ref({});
let realWeatherInfo = ref({
  lives: [
    {
      weather: "",
      temperature: "",
      windDirection: "",
      windPower: "",
      humidity: "",
    },
  ],
});
const issue = ref({})
const issueList = ref([])
onMounted(async () => {
    let ress = await getWeather(350926)
  realWeatherInfo.value = ress.data;

  let res = await tencentWeather('350926')
  if(res.data && res.data.length > 0){
  
    issueList.value = res.data
  }
  // issueList.value = [
  //   {signalType: '台风',signalLevel : '蓝色', issueContent: '台风台风台风' },
  //   {signalType: '暴雪',signalLevel : '蓝色', issueContent: '暴雪暴雪暴雪' },
  //   {signalType: '暴雨',signalLevel : '橙色', issueContent: '暴雨暴雨暴雨' },
  // ]
})

const getImg = (item) => {
    return weatherImg(item.signalType, item.signalLevel)
}
const toDetail = (item) => {
    Modal.warning({
        content: item.issueContent
    })
}
</script>
<style scoped lang="scss" >
  .weaInfo {
    // width: 80%;
    width: vw(550);
    height: vh(22);
    background: rgba(14, 54, 62, 0.75);
    border-radius: vh(8);
    padding: vh(4) vw(10);
    // margin: vh(4) 0;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(12);
    color: #2cd7bc;
    line-height: vh(22);

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
  }
  .issue-list{
    position: absolute;
    right: 0;
    top: 30px;
    display: flex;
  }
  .img{
    width: 80px;
    margin: 10px;
    cursor: pointer;
  }
</style>